<template>
  <div>

    <el-row class="container" style="width: 470px">

      <div id="body">
        <div class="g-center login-page" @keyup.enter="login">
          <el-tabs v-model="activeName">
            <el-tab-pane label="用户登陆" name="login">
              <el-form :model="loginForm" label-width="80px" :rules="loginRules" ref="loginForm" class="login-form">
                <el-form-item label="账号" prop="username">
                  <el-input v-model="loginForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="loginForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click.native="login" :loading="editLoading">登陆</el-button>
                  <el-button type="primary" @click="resetForm('loginForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="用户注册" name="register">
              <el-form :model="registerForm" label-width="80px" :rules="loginRules" ref="registerForm" class="login-form">
                <el-form-item label="账号" prop="username">
                  <el-input v-model="registerForm.username" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input v-model="registerForm.password" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click.native="register" :loading="editLoading">注册</el-button>
                  <el-button type="primary" @click="resetForm('registerForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>

      </div>

    </el-row>


  </div>
</template>
<script>

    import utilApi from '../../common/utils';
    import * as loginApi from '../api/login';

    import Vue from 'vue'

    export default {
        components: {},
        data() {
            return {
                LoginFormVisible: false,
                activeName: 'login',
                editLoading: false,
                loginForm: {
                    username: '',
                    password: ''
                },registerForm:{
                  username:'',
                  password:''
                },
                loginRules: {
                    username: [
                        {required: true, message: '请输入账号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'}
                    ]
                },
                user: {
                    userid: '',
                    username: '',
                    userimg: ''
                },
                logined: false,
                returnUrl: ''
            }
        },
        methods: {
            register: function () {
                //表单校验
                this.$refs.registerForm.validate((valid) => {
                    if (valid) {
                        this.editLoading = true;
                        //获取表单数据
                        let para = Object.assign({}, this.registerForm);
                        //登录认证请求
                        loginApi.register(para).then((res) => {
                                this.editLoading = false;
                                if (res.success) {
                                    this.$message('注册成功');
                                    //清空表单
                                    this.resetForm("registerForm");
                                } else {
                                    if (res.message) {
                                        this.$message.error(res.message);
                                    } else {
                                        this.$message.error('登陆失败');
                                    }
                                }
                            },
                            (res) => {
                                this.editLoading = false;
                            });
                    }
                });

            },

            //登录
            login: function () {
                //表单校验
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.editLoading = true;
                        //获取表单数据
                        let para = Object.assign({}, this.loginForm);
                        //登录认证请求
                        loginApi.login(para).then((res) => {
                                this.editLoading = false;
                                if (res.success) {
                                    this.$message('登陆成功');
                                    //刷新 当前页面
                                    // alert(this.returnUrl)
                                    console.log(this.returnUrl)
                                    //跳转url存在则跳转，若不存在，则跳转到首页
                                    if (this.returnUrl != 'undefined' && this.returnUrl != ''
                                        && !this.returnUrl.includes("/userlogout")
                                        && !this.returnUrl.includes("/userlogin")) {
                                        window.location.href = this.returnUrl;
                                    } else {
                                        //跳转到首页
                                        window.location.href = 'http://www.sfs.com/'
                                    }
                                } else {
                                    if (res.message) {
                                        this.$message.error(res.message);
                                    } else {
                                        this.$message.error('登陆失败');
                                    }
                                }
                            },
                            (res) => {
                                this.editLoading = false;
                            });
                    }
                });

            },

            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            //获取登录用户
            refresh_user: function () {
                let activeUser = utilApi.getActiveUser();

                if (activeUser) {
                    this.logined = true;
                    this.user = activeUser;
                    //console.log(this.user.username)
                } else {
                    this.showlogin()
                }
            },
            showlogin: function () {
                this.LoginFormVisible = true;
            }
        },
        created() {
            // var this_ = this;
            //bus.$on('childa-message', this.showlogin(this_));


        },
        mounted() {
            //获取当前用户
            this.refresh_user();
//    Vue.prototype.loginwin = this;
            if (this.$route.query && this.$route.query.returnUrl) {
                let returnUrl = Base64.decode(this.$route.query.returnUrl)
                //alert(returnUrl)
                this.returnUrl = returnUrl;
                //alert(this.returnUrl)
            }
            /*bus.$on('childa-message', function(data) {
              console.log("aaaaaaaaaaaaa"+data)
              alert(this.LoginFormVisible)
              this.LoginFormVisible = true
              alert(this.LoginFormVisible)
            });*/


        }
    }
</script>
<style scoped>
  .login-form {
    width: 400px;
    margin: 5% auto 0;
  }
</style>
